<script>
import NavbarToggler from "@/components/NavbarToggleButton.vue";
import FloatBtn from "@/components/FloatBtn.vue";
import SideRecommend from "@/components/SideRecommend.vue";
import CourseBase from "@/assets/json/CourseBase.json"
import VideoTree from "@/components/VideoTree.vue";
import javaListData4DX from "@/assets/json/JavaListData4DX.json";
import javaListData4XY from "@/assets/json/JavaListData4XY.json";
import GradeGauge from "@/components/GradeGauge.vue"
import RingGauge from "@/components/RingGauge.vue";
import Progress from '@/components/Progress.vue'
import Exam from "@/components/Exam.vue";
import ElTree from "@/components/ElTree.vue";
import {baseURL, getResourceURL} from "../axiosConfig";
import VTitle from "../components/VTitle.vue";


export default {
  props: {
    target: {
      type: [String, Number],
      default: '',
      description: "Button target element"
    },
    toggled: {
      type: Boolean,
      default: false,
      description: "Whether button is toggled"
    }
  },
  components: {
    VTitle,
    SideRecommend,
    FloatBtn,
    NavbarToggler,
    VideoTree,
    Exam,
    RingGauge,
    GradeGauge,
    Progress,
    ElTree
  },
  methods: {
    getResourceURL,
    getSvgImage(description) {
      const encodedDescription = encodeURIComponent(description);
      return `data:image/svg+xml,%3Csvg width='320' height='180' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3EDrawing%3C/title%3E%3Cg%3E%3Ctitle%3ELayer%201%3C/title%3E%3Crect id='svg_3' height='191.07122' width='382.49958' y='-2.5001' x='-5.00017' stroke-width='0' stroke='%23000' fill='%233891ff'/%3E%3Ctext transform='matrix(1.28664 0 0 1.28664 -13.9226 -27.9567)' stroke='%23000' xml:space='preserve' text-anchor='start' font-family='Noto Sans JP' font-size='24' id='svg_2' y='97.37594' x='22.47896' stroke-width='0' fill='%23ffffff'%3E${encodedDescription}%3C/text%3E%3Crect id='svg_4' height='2.14285' width='23.21426' y='101.42836' x='113.21399' stroke-width='0' stroke='%23000' fill='%233891ff'/%3E%3C/g%3E%3C/svg%3E`;
    },
    handleUrlClicked(url) {
      // 处理接收到的 URL 参数
      this.clickedUrl = url;
      // 更新动态key
      this.dynamicKey = Math.random(10000);
      console.log("点击的url: " + this.clickedUrl);
    },
    next() {
      if (this.active++ > 2) this.active = 0;
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    goToStudy() {
      console.log('go to');
      window.location.href = baseURL+':81/#/javaVideo';

    },
    fetchTDA() {
      this.$axios.get(baseURL + ':8080/student/tda/getTdaResult')
        .then(response => {
          // 处理成功的情况
          this.tdaResult = response.data.data;
          console.log(this.tdaResult.correct)
          console.log(this.tdaResult.wrong)
          console.log(this.tdaResult.correct)
          console.log('TDA数据:', this.tdaResult);
        })
        .catch(error => {
          // 处理错误情况
          console.error('获取TDA数据出现错误！', error);
        });
    },
    correctPercent() {
      this.crtPercent = this.tdaResult.correct / (this.tdaResult.wrong + this.tdaResult.correct) * 100;
      console.log('正确率:', this.tdaResult.correct);
      this.gradeGauge = this.tdaResult.correct / (this.tdaResult.wrong + this.tdaResult.correct) * 0.7 + this.tdaResult.averageDifficulty * 0.4;
      console.log('等级:', this.gradeGauge);
      return this.crtPercent
    },
  },
  created() {
    this.fetchTDA();
    // this.correctPercent();
    setInterval(() => {
      this.correctPercent();
    }, 1000); // 每秒更新一次


    if (this.userId === 123456) {
      this.mastered = 14;
      this.notMastered = this.totalMastered - this.mastered;
    } else {
      this.mastered = 33;
      this.notMastered = this.totalMastered - this.mastered;
    }
  },
  mounted() {
    // 当组件挂载时，从 localStorage 读取 userId
    this.userId = localStorage.getItem('userId') || 123456;

    this.correctPercent();

    const urlId = this.$route.params.id;
    // 现在你可以使用id来获取父组件传递的参数
    console.log("id: " + urlId);

    const videoPlayerHeight = this.$refs.videoPlayer.offsetHeight;
    this.videoListHeight = videoPlayerHeight;
    this.initData();
  },
  computed: {
    // 使用计算属性来动态计算掌握的百分比
    masteredPercent() {
      return (this.mastered / (this.mastered + this.notMastered) * 100).toFixed(1);
    },

    // // 使用计算属性来动态计算正确率
    crtPercentA() {
      return (this.tdaResult.correct / (this.tdaResult.wrong + this.tdaResult.correct) * 100).toFixed(2);
    },
  },
  data() {
    return {
      gradeGauge: 0,
      tdaResult: {
        "tda": 0,
        "averageTime": 0,
        "correct": 0,
        "wrong": 0,
        "averageDifficulty": 0
      },
      componentKey: 0,
      variable: '',
      userId: '',
      urlId: this.$route.params.id - 1, // 保存urlId为组件数据
      clickedUrl: '', // 保存点击视频节点的url
      dynamicKey: '', // 视频播放器key
      videoListHeight: 0,// 视频列表容器高度
      activeName: 'third',

      javaListData4DX: javaListData4DX,
      javaListData4XY: javaListData4XY,

      courseItems: CourseBase,

      docItems: [
        {
          id: 1,
          img: this.getSvgImage("Python U1 教案"),
          title: "Python U1 教案"
        },
        {
          id: 2,
          img: this.getSvgImage("Python U1 PPT"),
          title: "Python U1 PPT"
        },
        {
          id: 3,
          img: this.getSvgImage("Python U1 代码实例"),
          title: "Python U1 代码实例"
        },
        // 添加更多的项
      ],
      /**
       * 已掌握的题数
       */
      active: 0,
      mastered: 0,
      /**
       * 未掌握的题数
       */
      notMastered: 0,
      totalMastered: 143,
      /**
       * 正确的题数
       */
      correct: 45,
      /**
       * 错误的题数
       */
      wrong: 15,

      crtPercent: 2,

      drawer: false,//抽屉
      //treeData
      getNodeData(data) {
        console.log('data:', data)
      },
    }
  },
  watch: {
    crtPercent() {
      // 当 crtPercent 发生变化时，触发组件的重新渲染
      this.componentKey += 1;
    },
    gradeGauge() {
      this.componentKey += 1;
    }
  },
};

</script>

<template>
  <div>
    <v-title>{{ courseItems[urlId].title }} - 思议在线学习平台</v-title>

    <div class="row">
      <div class="col-12">
        <card>
          <div class="col-lg-4" style="margin: 1.5rem 0; display: flex; justify-content: center;float: left;">
            <img slot="image" :alt="courseItems[urlId].title" :src=getResourceURL(courseItems[urlId].img) class="card-img-top"
                 style="height: 17rem; width: auto;object-fit: cover;margin-top: 50px;">
          </div>
          <div class="col-lg-5" style="margin: 1.5rem 0;display: flex; flex-direction: column;float: left;">
            <h1>{{ courseItems[urlId].title }}</h1>
            <p>
              {{ courseItems[urlId].description }}
            </p>
            <div style="flex-grow: 1;"></div>
            <div class="start-study">
              <a target="_blank">
                <base-button class="start-study" fill type="primary">开始学习</base-button>
              </a></div>
          </div>

          <card class="col-lg-3" style="width: 19rem;float: left;text-align: left;padding-top: 1rem;">
            <el-divider direction="vertical" style="float: left;"></el-divider>
            <div style="float: right;">
              <h4 class="card-title" style="font-size: 24px;margin-bottom: 20px;">个性化推荐学习路径</h4>
              <div style="font-size:16px;margin-top: 8px;"><i class="el-icon-edit" style="color:rgba(62,169,37,0); "></i><a
                class="card-link" href="#" style="color:rgba(194,15,15,0);">2.3.2Java的数据类型.mp4</a></div>
              <el-tree/>
            </div>
          </card>
        </card>
      </div>

      <!-- <div class="col-12">
        <card>
          <div class="row">
            <span class="deco"></span>
            <h2 class="clearMargin">面向对象程序设计</h2>
          </div>
        </card>
      </div> -->
      <!-- <div class="col-12" ref="parentContainer" style="display: flex;">
        <card style="padding: 1rem; flex: 1;">
          <div class="row" style="height: 100%;">
            <div class="col-md-8" style="display: flex; flex-direction: column;">
              <div class="video-container">
                <video ref="videoPlayer" :key="dynamicKey" controls autoplay="autoplay" width="100%" height="100%">
                  <source :src="clickedUrl" type="video/mp4">
                </video>
              </div>
            </div>
            <div class="col-md-4" ref="videoListContainer"
                 style="max-height: 100%; overflow: auto;scrollbar-width: thin">
              <video-tree :list-data="javaListData" @url-clicked="handleUrlClicked"
                          :style="{ height: videoListHeight + 'px', margin: '0.5rem 0', marginBottom: '0'}"/>
            </div>
          </div>
        </card>
      </div> -->
      <div class="col-md-4">
        <div style="background-color:#fff;">

        </div>
      </div>
      <div class="col-lg-9">
        <card>
          <div style="height: auto;padding: 1.5rem">
            <div v-if="courseItems[urlId].subTitle1">
              <h3 class="card-title">
                <svg class="icon" height="24" p-id="8902" t="1709997126257"
                     version="1.1" viewBox="0 0 1024 1024" width="24" xmlns="http://www.w3.org/2000/svg">
                  <path
                    d="M107.010586 849.802343c-36.257616 0-65.636848-30.18602-65.636848-67.40299 0-37.218263 29.379232-67.369374 65.636848-67.369374 36.261495 0 65.666586 30.151111 65.666586 67.369374C172.677172 819.616323 143.272081 849.802343 107.010586 849.802343L107.010586 849.802343zM107.010586 580.222707c-36.257616 0-65.636848-30.187313-65.636848-67.399111 0-37.218263 29.379232-67.404283 65.636848-67.404283 36.261495 0 65.666586 30.18602 65.666586 67.404283C172.677172 550.035394 143.272081 580.222707 107.010586 580.222707L107.010586 580.222707zM107.010586 310.641778c-36.257616 0-65.636848-30.182141-65.636848-67.404283C41.373737 206.020525 70.75297 175.838384 107.010586 175.838384c36.261495 0 65.666586 30.182141 65.666586 67.399111C172.677172 280.459636 143.272081 310.641778 107.010586 310.641778L107.010586 310.641778zM982.626263 240.484848c0 21.422545-17.365333 38.787879-38.787879 38.787879L336.161616 279.272727c-21.422545 0-38.787879-17.365333-38.787879-38.787879l0 0c0-21.422545 17.365333-38.787879 38.787879-38.787879l607.676768 0C965.260929 201.69697 982.626263 219.062303 982.626263 240.484848L982.626263 240.484848zM982.626263 512c0 21.422545-17.365333 38.787879-38.787879 38.787879L336.161616 550.787879c-21.422545 0-38.787879-17.365333-38.787879-38.787879l0 0c0-21.422545 17.365333-38.787879 38.787879-38.787879l607.676768 0C965.260929 473.212121 982.626263 490.577455 982.626263 512L982.626263 512zM982.626263 783.515152c0 21.422545-17.365333 38.787879-38.787879 38.787879L336.161616 822.30303c-21.422545 0-38.787879-17.365333-38.787879-38.787879l0 0c0-21.422545 17.365333-38.787879 38.787879-38.787879l607.676768 0C965.260929 744.727273 982.626263 762.092606 982.626263 783.515152L982.626263 783.515152z"
                    fill="#1D253B" p-id="8903"></path>
                </svg>
                {{ courseItems[urlId].subTitle1 }}
              </h3>
              <p v-html="courseItems[urlId].subDescription1"></p>
            </div>
            <div v-if="courseItems[urlId].subTitle2">
              <hr>
              <h3 class="card-title">
                <svg class="icon" height="24" p-id="4307" t="1709996894429"
                     version="1.1" viewBox="0 0 1024 1024" width="24" xmlns="http://www.w3.org/2000/svg">
                  <path
                    d="M736 531.2l-25.6 44.8c83.2 44.8 128 134.4 128 224l51.2 0C889.6 691.2 832 588.8 736 531.2zM505.6 128C390.4 128 300.8 224 300.8 339.2c0 76.8 38.4 140.8 96 179.2C281.6 556.8 192 672 192 806.4l51.2 0c0-140.8 121.6-262.4 268.8-262.4 115.2 0 211.2-96 211.2-211.2S620.8 128 505.6 128zM505.6 492.8c-83.2 0-153.6-70.4-153.6-153.6 0-83.2 70.4-153.6 153.6-153.6 83.2 0 153.6 70.4 153.6 153.6C665.6 422.4 595.2 492.8 505.6 492.8zM883.2 364.8c0-89.6-70.4-166.4-166.4-166.4 6.4 12.8 19.2 32 25.6 44.8 57.6 12.8 96 64 96 121.6 0 70.4-57.6 128-128 128-12.8 19.2-25.6 32-38.4 44.8 12.8 0 25.6-6.4 38.4-6.4C806.4 531.2 883.2 454.4 883.2 364.8zM902.4 518.4l-19.2 38.4c64 38.4 102.4 108.8 102.4 179.2L1024 736C1024 646.4 979.2 563.2 902.4 518.4zM0 736l44.8 0c0-76.8 38.4-147.2 102.4-179.2L121.6 518.4C44.8 563.2 0 646.4 0 736zM345.6 531.2C332.8 518.4 320 505.6 307.2 486.4c-70.4 0-128-57.6-128-128 0-57.6 44.8-108.8 96-121.6C288 224 294.4 211.2 300.8 192c-89.6 0-166.4 76.8-166.4 166.4 0 89.6 76.8 166.4 166.4 166.4C320 531.2 332.8 531.2 345.6 531.2z"
                    fill="#1D253B" p-id="4308"></path>
                </svg>
                {{ courseItems[urlId].subTitle2 }}
              </h3>
              <p v-html="courseItems[urlId].subDescription2"></p>
            </div>
            <div v-if="!variable">
              <hr>
              <h3 class="card-title">
                <svg class="icon" data-spm-anchor-id="a313x.search_index.0.i8.43b93a81YolgR8" height="24" p-id="5715"
                     t="1709997031138" version="1.1"
                     viewBox="0 0 1024 1024" width="24" xmlns="http://www.w3.org/2000/svg">
                  <path
                    d="M512 755.44a29.984 29.984 0 0 1-14.032-2.96l-285.184-119.696a36.8 36.8 0 0 1-22.912-34.048v-481.6a37.536 37.536 0 0 1 16.256-31.024 36.416 36.416 0 0 1 34.72-2.96l156.624 65.76a36.8 36.8 0 0 1-28.08 67.968l-105.6-44.336v401.184l211.296 88.656v-425.6a36.8 36.8 0 0 1 22.896-33.984l285.184-119.696a38.528 38.528 0 0 1 34.72 2.96 36.592 36.592 0 0 1 16.256 31.024v481.648a36.8 36.8 0 0 1-22.896 33.984l-155.888 65.024a36.8 36.8 0 0 1-28.08-67.968l132.992-56.144v-401.12l-211.328 88.624v456.592a37.536 37.536 0 0 1-16.256 31.024 34.56 34.56 0 0 1-20.688 6.688z"
                    fill="#1D253B" p-id="5716"></path>
                  <path
                    d="M512 944a40 40 0 0 1-12.896-2.176L54.928 769.696A36.384 36.384 0 0 1 32 735.552V304.128a35.824 35.824 0 1 1 71.648 0v406L512 868.528l408.352-158.4v-376.96a35.824 35.824 0 1 1 71.648 0v402.368a37.136 37.136 0 0 1-22.928 34.144L524.896 941.808A34.272 34.272 0 0 1 512 944z"
                    fill="#1D253B" p-id="5717"></path>
                </svg>
                {{ courseItems[urlId].subTitle3 }}
              </h3>
              <p v-html="courseItems[urlId].subDescription3"></p>
            </div>
            <div v-if="!variable">
              <hr>
              <h3 class="card-title">
                <svg class="icon" height="24" p-id="7777" t="1709997080898"
                     version="1.1" viewBox="0 0 1024 1024" width="24" xmlns="http://www.w3.org/2000/svg">
                  <path
                    d="M897.28 85.333333h-750.933333c-28.16 0-51.2 23.04-51.2 51.2v750.933334c0 28.16 23.04 51.2 51.2 51.2h276.906666c18.773333 0 34.133333-15.36 34.133334-34.133334s-15.36-34.133333-34.133334-34.133333H163.413333V153.6h716.8v275.626667c0 18.773333 15.36 34.133333 34.133334 34.133333s34.133333-15.36 34.133333-34.133333V136.533333c0-28.16-22.613333-51.2-51.2-51.2z"
                    fill="#1D253B" p-id="7778"></path>
                  <path
                    d="M649.813333 315.733333h-324.266666c-18.773333 0-34.133333-15.36-34.133334-34.133333s15.36-34.133333 34.133334-34.133333h324.266666c18.773333 0 34.133333 15.36 34.133334 34.133333s-14.933333 34.133333-34.133334 34.133333zM564.48 452.266667h-238.933333c-18.773333 0-34.133333-15.36-34.133334-34.133334s15.36-34.133333 34.133334-34.133333h238.933333c18.773333 0 34.133333 15.36 34.133333 34.133333s-14.933333 34.133333-34.133333 34.133334zM479.146667 588.8h-153.6c-18.773333 0-34.133333-15.36-34.133334-34.133333s15.36-34.133333 34.133334-34.133334h153.6c18.773333 0 34.133333 15.36 34.133333 34.133334s-14.933333 34.133333-34.133333 34.133333zM743.68 529.066667c-113.066667 0-204.8 91.733333-204.8 204.8s91.733333 204.8 204.8 204.8 204.8-91.733333 204.8-204.8c0-112.64-91.306667-204.8-204.8-204.8z m0 341.333333c-75.093333 0-136.533333-61.44-136.533333-136.533333s61.013333-136.533333 136.533333-136.533334 136.533333 61.44 136.533333 136.533334c0 75.52-61.013333 136.533333-136.533333 136.533333z"
                    fill="#1D253B" p-id="7779"></path>
                  <path
                    d="M709.546667 810.666667c-18.773333 0-34.133333-15.36-34.133334-34.133334v-85.333333c0-18.773333 15.36-34.133333 34.133334-34.133333s34.133333 15.36 34.133333 34.133333v85.333333c0 18.773333-14.933333 34.133333-34.133333 34.133334z"
                    fill="#1D253B" p-id="7780"></path>
                  <path
                    d="M675.413333 776.533333c0-18.773333 15.36-34.133333 34.133334-34.133333h85.333333c18.773333 0 34.133333 15.36 34.133333 34.133333s-15.36 34.133333-34.133333 34.133334h-85.333333c-18.773333 0-34.133333-15.36-34.133334-34.133334z"
                    fill="#1D253B" p-id="7781"></path>
                </svg>
                {{ courseItems[urlId].subTitle4 }}
              </h3>
              <p v-html="courseItems[urlId].subDescription4"></p>
            </div>
          </div>
        </card>

        <div>
          <FloatBtn></FloatBtn>
          <div class="row">
            <h3 class="card-title"><i class="el-icon-s-management"
                                      style="margin-bottom: 5px;margin-left: 15px;margin-right: 10px"></i>当前学习情况
            </h3>

          </div>

        </div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="课程情况概览" name="third">
            <div>
              <card>
                <h3 class="card-title" style="text-align: left"> 课程情况概览</h3>
                <div class="row" style="height: 300px;">
                  <div class="col-lg-7" style="height: 280px;overflow: auto;scrollbar-width: none">

                    <ElTree :listData="null" class="custom-tree-height"></ElTree>

                    <div class="row" style="margin-left: 25px;margin-top: 15px;">
                      <div class="col-2">
                        <h4 class="text-muted clearMargin">习题数</h4>
                        <h1 class="clearMargin">0 <a class="text-muted h4">道</a></h1>
                      </div>

                      <div v-if="userId==='123456'" class="col-5">
                        <h4 class="text-muted clearMargin" style="margin-left: 70px">作业数</h4>
                        <h1 class="clearMargin" style="margin-left: 10px;">0/0 <a class="text-muted h4">个</a> <a
                          class="h4">平均分:0</a></h1>
                      </div>
                      <div v-if="userId==='123456'" class="col-5">
                        <h4 class="text-muted clearMargin" style="margin-left: 50px">测验数</h4>
                        <h1 class="clearMargin">0/0<a class="text-muted h4">个</a> <a class="h4">平均分:0</a></h1>
                      </div>

                      <div v-if="userId==='234567'" class="col-5">
                        <h4 class="text-muted clearMargin" style="margin-left: 70px">作业数</h4>
                        <h1 class="clearMargin" style="margin-left: 10px;">0 <a class="text-muted h4">个</a> <a
                          class="h4">平均分:0</a></h1>
                      </div>
                      <div v-if="userId==='234567'" class="col-5">
                        <h4 class="text-muted clearMargin" style="margin-left: 50px">测验数</h4>
                        <h1 class="clearMargin">0/0<a class="text-muted h4">个</a> <a class="h4">平均分:0</a></h1>
                      </div>
                    </div>
                  </div>
                  <div id="center" class="col-lg-5">
                    <card>
                      <!--                <h3 class="card-title" style="text-align: left;margin-bottom: 2rem">-->
                      <!--                  TDA指标-->
                      <!--                  <a class="text-muted" style="text-align: right;font-size: 14px">T=Time D=Difficult A=Accuracy</a>-->
                      <!--                </h3>-->
                      <h1 class="TDA" style="text-align: center">TDA / 0 </h1>
                      <p class="text-muted ">TDA数值越高表示该环节的水平越高</p>
                      <h4>击败了全校<a style="color:#2e63f3;">0 %</a>的学生</h4>
                      <div style="height: 2.3rem;"></div>
                      <hr>
                      <div class="row">
                        <div class="col-4">
                          <h1 class="clearMargin"> 0 <a
                            class="text-muted h4">s</a></h1>
                          <h4 class="text-muted clearMargin">平均用时</h4>
                        </div>
                        <div class="col-4">
                          <h1 class="clearMargin">
                            0 <a
                            class="text-muted h4">%</a></h1>
                          <h4 class="text-muted clearMargin">正确率</h4>
                        </div>
                        <div class="col-4">
                          <h1 class="clearMargin">0</h1>
                          <h4 class="text-muted clearMargin">平均难度</h4>
                        </div>
                      </div>
                    </card>
                  </div>
                </div>
              </card>
            </div>
          </el-tab-pane>
          <el-tab-pane label="知识点明细" name="first">
            <div>
              <card>
                <h3 class="card-title" style="text-align: left"> 知识点明细</h3>
                <el-tree></el-tree>
              </card>
            </div>
          </el-tab-pane>
          <el-tab-pane label="每日做题" name="second">
            <div>
              <card>
                <h3 class="card-title" style="text-align: left"> 练习一下</h3>
                <exam style="min-height: 20.1rem"></exam>
              </card>
            </div>
          </el-tab-pane>

        </el-tabs>
        <div class="row">
          <div class="col-lg-6" style="height: 22rem;float:left">
            <card>
              <h3 class="card-title" style="text-align: left"> 等级评价</h3>
              <GradeGauge :key="componentKey" :ring-value="0"></GradeGauge>
            </card>
          </div>
          <div id="center" class="col-lg-6" style="float: left;">
            <card style="height: 23.1rem;">
              <h3 class="card-title" style="text-align: left"> 知识点掌握情况</h3>
              <div class="row">
                <div class="col-6">
                  <div style="width: 100%;">
                    <RingGauge :value="0" name="知识点掌握"/>
                    <h4 class="text-muted" style="text-align: center;font-size: 15px;">已掌握：0 |
                      未掌握：0</h4>
                  </div>
                </div>
                <div class="col-6">
                  <div style="width: 100%;">
                    <RingGauge :key="componentKey" :color="['#ffb497', '#ff4100']" :value="0"
                               name="答题正确率"/>
                    <h4 class="text-muted" style="text-align: center;font-size: 15px;">
                      答对题数：0 |
                      答错题数：0</h4>
                  </div>
                </div>
              </div>
            </card>
          </div>
        </div>
      </div>

      <div class="col-lg-3">

        <side-recommend :category="'course'" :items="courseItems" :user="this.userId">
          <template v-slot:title>推荐课程</template>
        </side-recommend>
        <!--        <side-recommend>
                  <template v-slot:title>推荐练习</template>
                </side-recommend>-->
        <side-recommend :items="docItems" category="doc">
          <template v-slot:title>推荐课件</template>
        </side-recommend>

      </div>

    </div>
  </div>
</template>

<style scoped>
ul {
  padding-left: 1rem;
}

#list {
  list-style: none;
  line-height: 2rem;
  width: 399px;

  :hover {
    color: #2a80cc;
  }

  :focus {
    color: #219df8;
  }
}

a {
  color: #1e1e24;
}

.video-container {
  position: relative;
  width: 100%;
  padding-top: 62.39%;
  /* 视频宽高比 */
}

.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

#center {
  text-align: center;
}

.deco {
  margin: 0 1rem;
  height: 2.5rem;
  width: 5px;
  background-color: #1f86f6;
}

.clearMargin {
  margin-bottom: 0.5rem;
}

.custom-tree-height {
  height: 200px;
  /* 设置你需要的高度 */
  overflow-y: auto;
  /* 如果需要滚动条 */
}

.el-divider--vertical {
  display: inline-block;
  width: 1px;
  height: 25em;
  margin: 0 8px;
  vertical-align: middle;
  position: relative;
}

.el-icon-edit {
  color: red;
  margin-right: 20px
}
</style>
